<template>
    <div class="sdy-list">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list class="list-box" v-model:loading="loading" :finished="finished" offset="50" @load="getList"
                finished-text="没有更多了 O(∩_∩)O~">
                <div class="list-item" v-for="item in goodsList" :key="item.proid">
                    <img :src="item.img1" alt="">
                    <p class="title">{{ item.proname }}</p>
                    <p class="price">￥ {{ item.originprice }}</p>
                    <p class="other">
                        <span>{{ item.discount }}折</span>
                        <span>看相似</span>
                    </p>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script name="sdyList" lang="ts" setup>
import { getGoodsList } from '../../../model/goods';
import { ref } from 'vue'

// 定义接口
interface GoodsInfo {
    img1?: string
    proid?: string
    proname?: string
    originprice?: number
    discount?: number
    [key: string]: any
}

interface Response {
    code: string
    data: Array<GoodsInfo>
}

// 表示是否在加载中
const loading = ref<boolean>(false)
const finished = ref<boolean>(false)
// 下拉刷新
const refreshing = ref<boolean>(false)

const goodsList = ref<Array<GoodsInfo>>([])

// 配置一个变量表示第几页
const pagenum = ref<number>(1)

// 发送请求
const getList = () => {
    setTimeout(async () => {
        const res = await getGoodsList(pagenum.value)
        if ((res as unknown as Response).code !== '200') return
        goodsList.value.push(...res.data)
        if (res.data.length < 10) finished.value = true
        pagenum.value++
        // 页面渲染完毕,调整loding为true
        loading.value = false
        // 让下拉刷下还原
        refreshing.value = false
    }, 1000)
}
// 下拉刷新的时间
const onRefresh = () => {
    pagenum.value = Math.floor(Math.random() * 5) + 1
    // 把数组清空
    goodsList.value = []
    // 把完成状态还原到未完成
    finished.value = false
    // 发送一次请求
    getList()
}

</script>

<style lang="scss" scoped>
.sdy-list {
    margin-top: 10px;
}

.list-box {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;

    >.list-item {
        width: 45%;
        background-color: #fff;
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 10px;

        >img {
            width: 100%;
            height: 160px;
            display: block;
        }

        >p.title {
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            line-clamp: 1;
            -webkit-box-orient: vertical;
            margin: 10px;
            font-size: 14px;
        }

        >p.price {
            margin: 10px;
            color: red;
            font-size: 18px;
        }

        >p.other {
            display: flex;
            padding: 0 10px 10px;
            justify-content: space-between;
            align-items: center;

            >span {
                font-size: 12px;

                &:first-child {
                    color: #ccc;
                }

                &:last-child {
                    padding: 5px;
                    background-color: #F2F2F2;
                    border-radius: 5px;
                }
            }
        }
    }
}
</style>